<template>
  <el-button
    size="small"
    link
    type="danger"
    :icon="icon"
    :class="'anvil-button anvil-button-text ' + extClass"
    :style="style"
    @click="click"
    v-hasPermi="perm"
    v-hasRole="role"
    v-hasRoleType="roleType"
  >{{ text }}</el-button>
</template>

<script>
export default {
  name: 'TextDangerButton',
  inheritAttrs: false,
  props: {
    text: {
      type: String,
      required: true
    },
    message: {
      type: String,
      required: false,
      default: () => ''
    },
    icon: {
      type: String,
      required: false,
      default: () => ''
    },
    style: {
      type: String,
      required: false,
      default: () => ''
    },
    extClass: {
      type: String,
      required: false,
      default: () => ''
    },
    perm: {
      type: Array,
      required: false,
      default: () => []
    },
    role: {
      type: Array,
      required: false,
      default: () => []
    },
    roleType: {
      type: Array,
      required: false,
      default: () => []
    }
  },
  methods: {
    click() {
      this.$confirm(this.message, {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        this.$emit('click');
      });
    }
  }
}
</script>
